<template>
	<view class="home-container">
		<!-- 顶部导航栏 -->
		<!-- <uv-navbar :border="false" title="首页" fixed></uv-navbar> -->
		<uv-tabs
			:list="tabList"
			:current="currentTab"
			@change="onTabChange"
			lineColor="#3C3C3C"
			activeStyle="color:#3C3C3C;font-weight:bold;"
			style="margin-top: 10rpx;"
		></uv-tabs>

		<!-- 搜索框 -->
		<view class="search-box">
			<uv-search
				placeholder="搜索课程和话术"
				v-model="searchValue"
				:showAction="false"
				bgColor="#f6f7fa"
				height="80rpx"
				borderRadius="40rpx"
			/>
		</view>

        <view class="menu-container">
			<!-- 功能菜单 -->
			<uv-grid :col="5" :border="false" class="menu-grid">
				<uv-grid-item v-for="(item, idx) in menuList" :key="idx">
					<view :class="['menu-icon', item.color]">
						<uv-icon :name="item.icon" :size="48" :color="item.iconColor" />
					</view>
					<text class="menu-text">{{ item.text }}</text>
				</uv-grid-item>
			</uv-grid>

			<view v-if="tabContent.length">
				<template v-for="(module, idx) in tabContent[currentTab]?.modules" :key="idx">
					<Category1
						v-if="module.template_code === 'category_1'"
						:list="module.details" 
						:title="module.module_name" 
						:colorData="yellow"
					/>
					<Category2
						v-else-if="module.template_code === 'category_2'"
						:data="module.data"
					/>
					<!-- 你可以继续添加更多类型的组件 -->
					<view v-else>
						<!-- 未知模块类型：{{ module.template_code }} -->
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import Category1 from '@/pages/components/category/category-1.vue'
import Category2 from '@/pages/components/category/category-2.vue'

const tablistTem =  [
            {
                "nav_id": 1,
                "nav_name": "首页",
                "nav_code": "N2502221113RS2K98PY6446M",
                "nav_type": "home",
                "nav_image": null,
                "nav_order": 0,
                "nav_describe": null,
                "modules": [
                    {
                        "module_id": 5,
                        "module_name": "banner-课程",
                        "module_code": "M2504061333897II0GK54R1H",
                        "module_type": "nav",
                        "template_type": null,
                        "template_code": "course_1",
                        "target_type": "banner",
                        "module_describe": null,
                        "module_image": null,
                        "module_order": 100,
                        "details": [
                            {
                                "detail_id": 31,
                                "target_id": 1,
                                "target_type": "banner",
                                "target_code": null,
                                "detail_order": 1,
                                "target_params": null
                            }
                        ],
                        "total": 1,
                        "has_more": false
                    },
                    {
                        "module_id": 4,
                        "module_name": "心理学-1",
                        "module_code": "M250406130011BI96V3G3X4K",
                        "module_type": "nav",
                        "template_type": null,
                        "template_code": "category_1",
                        "target_type": "category",
                        "module_describe": null,
                        "module_image": null,
                        "module_order": 200,
                        "details": [
                            {
                                "detail_id": 28,
                                "target_id": 6,
                                "target_type": "category",
                                "target_code": null,
                                "detail_order": 0,
                                "target_params": null,
                                "name": "观念与态度",
                                "type": "course",
                                "level": 2,
                                "order": 2,
                                "parent_id": 5
                            },
                            {
                                "detail_id": 29,
                                "target_id": 7,
                                "target_type": "category",
                                "target_code": null,
                                "detail_order": 0,
                                "target_params": null,
                                "name": "决策与判断",
                                "type": "course",
                                "level": 2,
                                "order": 3,
                                "parent_id": 5
                            },
                            {
                                "detail_id": 30,
                                "target_id": 8,
                                "target_type": "category",
                                "target_code": null,
                                "detail_order": 0,
                                "target_params": null,
                                "name": "自我成长",
                                "type": "course",
                                "level": 2,
                                "order": 4,
                                "parent_id": 5
                            }
                        ],
                        "total": 3,
                        "has_more": false
                    }
                ]
            }
];

export default {
	components: { Category1, Category2 },
	data() {
		return {
			//tablistTem: tablistTem,
			//tabList: tablistTem.map(item => ({ name: item.nav_name })),
			tabList: [],
			tabContent: tablistTem,
			searchValue: '',
			currentTab: 0,
			menuList: [
				{ icon: 'calendar', text: '课程', color: 'blue', iconColor: '#2468F2' },
				{ icon: 'list-dot', text: '话术', color: 'blue', iconColor: '#2468F2' },
				{ icon: 'integral', text: '会员', color: 'blue', iconColor: '#2468F2' },
				{ icon: 'kefu-ermai', text: '客服', color: 'blue', iconColor: '#2468F2' },
				{ icon: 'grid', text: '全部分类', color: 'blue', iconColor: '#2468F2' },
				{ icon: 'calendar', text: '情感大师', color: 'red', iconColor: '#F24D4D' },
				{ icon: 'list-dot', text: '话术', color: 'blue', iconColor: '#2468F2' },
				{ icon: 'integral', text: '会员', color: 'yellow', iconColor: '#F2C94C' },
				{ icon: 'kefu-ermai', text: '客服', color: 'blue', iconColor: '#2468F2' },
				{ icon: 'grid', text: '全部分类', color: 'blue', iconColor: '#2468F2' }
			]
		}
	},
	onLoad() {
		this.getTabData()
	},
	methods: {
		getTabData() {
			uni.request({
				url: 'http://apiv2.course.com/api/nav/type',
				method: 'POST',
				data: { nav_type: 'home' },
				success: (res) => {
					//console.log(res.data.data);
					if (res.data && res.data.data) {
						this.tabList = res.data.data.items.map(item => ({ name: item.nav_name }))

						//console.log(this.tabList);

						this.tabContent = res.data.data
					}
				}
			})
		},
		onTabChange(index) {
			this.currentTab = index.index
			console.log('currentTab:' + index.index);
		}
	}
}
</script>

<style scoped>
.home-container {
	background: #f6f7fa;
	min-height: 100vh;
	padding-bottom: 40rpx;
}
.search-box {
	margin: 32rpx 24rpx 0 24rpx;
}
.menu-grid {
	margin: 32rpx 15px 24rpx 15px;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 24rpx 0 rgba(36,104,242,0.04);
	padding: 24rpx 0;
}
.menu-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8rpx auto;
	background: #f6f7fa;
	box-shadow: 0 4rpx 12rpx 0 rgba(36,104,242,0.08);
}
.menu-icon.blue { border: 2rpx solid #2468F2; }
.menu-icon.red { border: 2rpx solid #F24D4D; }
.menu-icon.yellow { border: 2rpx solid #F2C94C; }
.menu-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
	margin-top: 4rpx;
}

</style>
